import React, { useEffect } from 'react';
import useHoxModel from '../../useHoxModel';
import { DatePicker } from 'antd';
import styles from './index.less';
import moment from 'moment';
import IconFont from '@/components/IconFont';
const { RangePicker } = DatePicker;

const DemoStackedArea: React.FC = () => {
  const { getOpenRecordCount, openRecordCount = 0 } = useHoxModel((model) => [
    model.openRecordCount,
    model.openRecordPieLoading,
  ]);
  useEffect(() => {
    getOpenRecordCount({
      startTime: moment().subtract(1, 'month').valueOf(),
      endTime: moment().valueOf(),
    });
  }, []);

  return (
    <div className={styles['open-record-count-wrap']}>
      <div className={styles['content']}>
        <div className={styles['title']}>总开门次数</div>
        <div className={styles['count']}>{openRecordCount}</div>
      </div>
      <div className={styles['time']}>
        <RangePicker
          bordered={false}
          format={'YY.MM.DD'}
          suffixIcon={<IconFont type={'iconshouyeriqi'} />}
          defaultValue={[moment().subtract(1, 'month'), moment()]}
          onChange={(time: any) => {
            getOpenRecordCount({ startTime: time[0].valueOf(), endTime: time[1].valueOf() });
          }}
        />
      </div>
    </div>
  );
};

export default DemoStackedArea;
